<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vue改动进度条</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="app">
            <svg width="200" height="200" viewBox="0 0 200 200">
                <line
                    x1="10"
                    y1="10"
                    x2="180"
                    y2="10"
                    fill="none"
                    stroke-width="12"
                    stroke="#666"
                    stroke-linecap="round"
                />
                <line
                    x1="10"
                    y1="10"
                    x2="180"
                    y2="10"
                    fill="none"
                    stroke-width="12"
                    stroke="#FC4D04"
                    stroke-dasharray="170"
                    :stroke-dashoffset="dashOffsetLine"
                    stroke-linecap="round"
                    id="lineInner"
                />
                <circle
                    cx="10"
                    cy="10"
                    r="3"
                    fill="none"
                    stroke="green"
                    stroke-width="6"
                    id="circle"
                    :style="{transform: 'translateX('+ circleLinePosition + 'px)'}"
                    
                    id="circle"
                />

                <circle
                    cx="100"
                    cy="120"
                    r="74"
                    fill="none"
                    stroke="#666"
                    stroke-width="12"
                />
                <circle
                    cx="100"
                    cy="120"
                    r="74"
                    fill="none"
                    stroke="#FC4D04"
                    stroke-width="12"
                    stroke-dasharray="465"
                    :stroke-dashoffset="dashOffsetCircle"
                    stroke-linecap="round"
                />
                <circle
                    cx="100"
                    cy="120"
                    r="74"
                    fill="none"
                    stroke="green"
                    stroke-width="12"
                    stroke-dashoffset="464.5"
                    stroke-dasharray="465"
                    stroke-linecap="round"
                    id="circleInner"
                    :style="{
                        transform: 'rotate('+ circleInnerPosition +'rad)',
                        transformOrigin: '100px 120px'
                    }"
                />
            </svg>
            <div class="action">
                <div class="line">
                    <label for=""
                        >line: stroke-dashoffset = "{{dashOffsetLine}}"</label
                    >
                    <input
                        type="range"
                        name="points"
                        min="0"
                        value="{{dashOffsetLine}}"
                        v-model="dashOffsetLine"
                        max="170"
                        step="1"
                        @input="moveLine"
                    />
                </div>
                <div class="circle">
                    <label
                        >circle:stroke-dashoffset =
                        "{{dashOffsetCircle}}"</label
                    >
                    <input
                        type="range"
                        name="points"
                        min="0"
                        value="{{dashOffsetCircle}}"
                        v-model="dashOffsetCircle"
                        max="465"
                        step="1"
                        @input="moveCircle"
                    />
                </div>
            </div>
        </div>
        <script src='https://cdn.jsdelivr.net/npm/vue'></script>
        <script src="./index.js"></script>
    </body>
</html>
